<template>
  <a-card>
    <p>官网: <a hre="https://surmon-china.github.io/vue-quill-editor/" target="_blank">https://surmon-china.github.io/vue-quill-editor/</a>
    </p>
    <p>文档: <a hre="https://quilljs.com/docs/quickstart/" target="_blank">https://quilljs.com/docs/quickstart/</a></p>
    <quill-editor :value="htmlContent" @change="onEditorChange"/>
    <a-button @click="onGetHtmlContent">获取html内容</a-button>
    <a-button @click="onGetTextContent">获取text内容</a-button>
  </a-card>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import xss from 'xss'

export default {
  components: {
    QuillEditor
  },
  data () {
    return {
      htmlContent: '',
      changedHtmlContent: '',
      changedTextContent: ''
    }
  },
  // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    /**
     * 监听编辑器内容改变
     */
    onEditorChange ({ html, text }) {
      this.changedHtmlContent = html
      this.changedTextContent = text
    },
    onGetHtmlContent () {
      // xss方法用来防止跨域攻击
      const changedHtmlContent = xss(this.changedHtmlContent)
      /* eslint-disable */
      this.$message.open({
        content: (<div style="text-align:left;width:500px"><h3>html内容</h3> <p>{changedHtmlContent}</p> </div>)
      })
      /* eslint-enable */
    },
    onGetTextContent () {
      const changedTextContent = this.changedTextContent
      /* eslint-disable */
      this.$message.open({
        content: (<div style="text-align:left;width:500px"><h3>text内容</h3> <p>{changedTextContent}</p> </div>)
      })
      /* eslint-enable */
    }
  },
  mounted () {
    this.htmlContent = `<h1 class="ql-align-center">
                          <span class="ql-font-serif" style="background-color: rgb(240, 102, 102); color: rgb(255, 255, 255);"> I am Example 1! </span>
                        </h1>
                        <p><br></p>
                        <p><span class="ql-font-serif">W Can a man still be brave if he's afraid? That is the only time a man can be brave. </span></p>
                        <p><br></p>
                        <p><strong class="ql-font-serif ql-size-large">Courage and folly is </strong><strong class="ql-font-serif ql-size-large" style="color: rgb(230, 0, 0);">always</strong><strong class="ql-font-serif ql-size-large"> just a fine line.</strong></p>
                        <p><br></p>
                        <p><u class="ql-font-serif">There is only one God, and his name is Death. And there is only one thing we say to Death: "Not today."</u></p>
                        <p><br></p>
                        <p><em class="ql-font-serif">Fear cuts deeper than swords.</em></p>
                        <p><br></p>
                        <pre class="ql-syntax" spellcheck="false">const a = 10;<br>const editorOption = { highlight: text => hljs.highlightAuto(text).value };</pre>
                        <p><br></p>
                        <p><span class="ql-font-serif">Every flight begins with a fall.</span></p>
                        <p><br></p>
                        <p><a href="https://surmon.me/" target="_blank" class="ql-font-serif ql-size-small" style="color: rgb(230, 0, 0);"><u>A ruler who hides behind paid executioners soon forgets what death is. </u></a></p>
                        <p><br></p>
                        <iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" height="238" width="560"></iframe>
                        <p><br></p>
                        <p><span class="ql-font-serif">Hear my words, and bear witness to my vow. Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the fire that burns against the cold, the light that brings the dawn, the horn that wakes the sleepers, the shield that guards the realms of men. I pledge my life and honor to the Night’s Watch, for this night and all the nights to come.</span></p>
                        <p><br></p>
                        <p><span class="ql-font-serif">We are born to suffer, to suffer can make us strong.</span></p>
                        <p><br></p>
                        <p><span class="ql-font-serif">The things we love destroy us every time.</span></p>
                        `
  }
}
</script>

<style scoped>
</style>
